<!--
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<div class="fieldset-wrapper"
     css="$data.additionalClasses"
     attr="'data-level': $data.level, 'data-index': index"
     data-bind="visible: $data.visible === undefined ? true: $data.visible">
    <div class="fieldset-wrapper-title"
         attr="tabindex: !collapsible ? -1 : 0"
         click="toggleOpened"
         keyboard="13: toggleOpened"
         if="label">

        <strong css="'admin__collapsible-title': collapsible,
                      title: !collapsible,
                      '_changed': changed,
                      '_loading': loading,
                      '_error': error">
            <span text="label"/>
            <span class="admin__page-nav-item-messages" if="element.collapsible">
                <span class="admin__page-nav-item-message _changed">
                    <span class="admin__page-nav-item-message-icon"></span>
                    <span class="admin__page-nav-item-message-tooltip"
                          data-bind="i18n: 'Changes have been made to this section that have not been saved.'">
                    </span>
                </span>
                <span class="admin__page-nav-item-message _error">
                    <span class="admin__page-nav-item-message-icon"></span>
                    <span class="admin__page-nav-item-message-tooltip"
                            data-bind="i18n: 'This tab contains invalid data. Please resolve this before saving.'">
                    </span>
                </span>
                <span class="admin__page-nav-item-message-loader">
                    <span class="spinner">
                       <span repeat="8"/>
                    </span>
               </span>
            </span>
        </strong>
    </div>

    <div class="admin__fieldset-wrapper-content"
         css="'admin__collapsible-content': collapsible, '_show': opened, '_hide': !opened">
        <fieldset class="admin__fieldset" each="data: elems, as: 'element'" render=""/>
    </div>
</div>
